<template>
  <div>
    <navTop></navTop>
    <div class="goods-content">
      <div class="goods-img">
        <img :src="goodsInfo.gimg" alt />
      </div>
      <div class="goods-tit">
        <p>{{goodsInfo.gname}}</p>
        <p>{{goodsInfo.gprice}}元</p>
        <p>充100返100，点击充值</p>
        <p>
          <span>多买多折</span>
          <em>第二件半价</em>
        </p>
        <p>
          <span>免邮</span>
          <em>全场购物满199元免运费</em>
        </p>
        <p>
          <span>优惠券</span>
          <em>满300减30</em>
          <em>新人有礼</em>
        </p>
      </div>
      <div class="goodsType-choose">
        <div class="typeChoose" @click="isShow">
          <p>
            <i class="iconfont icon-wancheng"></i>
            <span>选择 颜色/尺码</span>
          </p>
          <i class="iconfont icon-jiantou-copy"></i>
        </div>
        <div class="goodsChoose" v-show="chooseShow">
          <h3>选择颜色</h3>
          <p>
            <span
              v-for="(item,index) in goodsColor"
              :key="index"
              @click="highColor(index)"
              :class="{myActive:activeColor==index}"
            >{{item}}</span>
          </p>
          <h3>尺码选择</h3>
          <p>
            <span
              v-for="(item,index) in goodsSize"
              :key="index"
              @click="highSize(index)"
              :class="{myActive:activeSize==index}"
            >{{item}}</span>
          </p>
          <h3>购买数量</h3>
          <p>
            <span @click="reduceCount">-</span>
            <input type="text" v-model="count" />
            <span @click="addCount">+</span>
          </p>
        </div>
      </div>
    </div>
    <div class="add-cart">
      <span @click="goCart">
        <i class="iconfont icon-gouwuche">
          <em>{{this.$store.state.cart.totalCount || 0}}</em>
        </i>
      </span>
      <input @click="addCart" type="button" value="加入购物车" />
    </div>
  </div>
</template>

<script>
import navTop from "@/components/common/navTop.vue";
import getGoods from "@/api/getGoods.js";
export default {
  data() {
    return {
      count: 1,
      chooseShow: false,
      activeColor: null,
      activeSize: null,
      goodsColor: this.$store.state.cart.goodsColor,
      goodsSize: this.$store.state.cart.goodsSize,
      goodsInfo: "",
      myParams: {
        username: this.$store.state.user.username,
        gid: this.$route.params.index,
        gcount: "",
        color:"",
        size:""
      }
    };
  },
  components: {
    navTop
  },
  created() {
    this.getGoodsType();
  },
  methods: {
    async getGoodsType() {
      try {
        let p = await getGoods.getGoodsInfo(this.$route.params.index);
        this.goodsInfo = p.data.data[0];
        this.myParams.gcount = this.count;
      } catch (err) {
        this.$toast.fail(err + "");
      }
    },
    //传index
    async addCart() {
      try {
        let p = await this.$store.dispatch("checktoken");
        if (p.data.flag) {
          if (this.chooseShow) {
            if (this.activeColor != null && this.activeSize != null) {
              this.myParams.color = this.$store.state.cart.goodsColor[this.activeColor]
              this.myParams.size = this.$store.state.cart.goodsSize[this.activeSize]
              try {
                let res = await this.$store.dispatch("addcart", this.myParams);
                if (res.flag) {
                  this.$toast.success("添加成功");
                }
              } catch (err) {
                this.$toast.fail(err + "");
              }
            } else {
              this.$toast.fail("请选择颜色/尺码");
            }
          } else {
            this.$toast.fail("请选择颜色/尺码");
            this.isShow();
          }
        } else {
          this.$toast.fail("请登录后进行购物");
          this.$router.push("/my/MyTab/login");
        }
      } catch (err) {
        this.$toast.fail("请登录后进行购物");
        this.$router.push("/my/MyTab/login");
      }
    },
    addCount() {
      this.count++;
      this.myParams.gcount = this.count;
    },
    reduceCount() {
      this.count--;
      this.myParams.gcount = this.count;
    },
    isShow() {
      this.chooseShow = !this.chooseShow;
    },
    highColor(index) {
      this.activeColor = index;
    },
    highSize(index) {
      this.activeSize = index;
    },
    goCart() {
      this.$router.push("/shopcart");
    }
  },
  watch: {
    count: {
      handler(newval) {
        if (newval < 1) {
          this.count = 1;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-content {
  margin-bottom: 34px;
}
.goods-img {
  width: 374px;
  height: 374px;
  img {
    width: 100%;
    height: 100%;
  }
}
.goods-tit {
  width: 100%;
  height: 158px;
  text-align: left;
  padding: 10px 20px 0 20px;
  p {
    font-size: 12px;
    color: #6b6a6a;
    &:nth-of-type(1) {
      margin-bottom: 4px;
    }
    &:nth-of-type(2) {
      font-size: 14px;
      color: #c91f27;
    }
    &:nth-of-type(3) {
      font-size: 12px;
      color: #c91f27;
      border-bottom: 1px solid #dbdbdb;
      height: 24px;
      line-height: 24px;
      margin-bottom: 10px;
    }
    &:nth-of-type(4),
    &:nth-of-type(5),
    &:nth-of-type(6) {
      span {
        display: inline-block;
        padding: 0 4px;
        height: 16px;
        background: #b51319;
        color: #fff;
        font-size: 10px;
        text-align: center;
        line-height: 18px;
        border-radius: 4px;
        margin: 0 4px 8px 0;
      }
    }
    &:nth-of-type(6) {
      em {
        display: inline-block;
        padding: 0 8px;
        height: 16px;
        background: #b51319;
        color: #fff;
        font-size: 10px;
        text-align: center;
        line-height: 18px;
        margin: 0 6px;
        position: relative;
        &::after {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          position: absolute;
          top: 4px;
          left: -4px;
          border-radius: 50%;
          background: #fff;
        }
        &::before {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          position: absolute;
          top: 4px;
          right: -4px;
          border-radius: 50%;
          background: #fff;
        }
      }
    }
  }
}
.goodsType-choose {
  .typeChoose {
    width: 90%;
    padding: 10px;
    margin: 12px 5%;
    background: #f5f5f5;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    position: relative;
    border-radius: 6px;
    &::after {
      content: "";
      width: 100%;
      border-top: 1px solid #dfdfdf;
      position: absolute;
      left: 0;
      top: -12px;
    }
    &::before {
      content: "";
      width: 100%;
      border-top: 1px solid #dfdfdf;
      position: absolute;
      left: 0;
      bottom: -12px;
    }
  }
}
.goodsChoose {
  padding: 0 5%;
  text-align: left;
  h3 {
    font-size: 12px;
    color: #3e3e3e;
    margin: 12px 0;
  }
  p {
    font-size: 12px;
    color: #3e3e3e;
    width: 100%;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 4px;
    &:nth-of-type(1) {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      span {
        padding: 6px 9px;
        border: 1px solid #c3c3c3;
        border-radius: 6px;
        margin: 0 5px 4px 0;
      }
    }
    &:nth-of-type(2) {
      padding-bottom: 18px;
      span {
        padding: 6px 9px;
        border: 1px solid #c3c3c3;
        border-radius: 6px;
        margin-right: 5px;
      }
    }
    &:nth-of-type(3) {
      input[type="text"] {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #dbdbdb;
        text-align: center;
        display: inline-block;
        margin: 0 6px;
        position: relative;
        top: -2px;
      }
      span {
        display: inline-block;
        width: 26px;
        height: 26px;
        background: #f5f5f5;
        font-size: 22px;
        color: #626262;
        text-align: center;
        border-radius: 4px;
        box-shadow: 1px 1px 1px #5c5c5c55;
      }
    }
  }
}
.goods-ord {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
  a {
    font-size: 14px;
    color: #747474;
  }
}
.add-cart {
  width: 100%;
  height: 34px;
  border-top: 1px solid #d1d1d1;
  position: fixed;
  bottom: 0;
  z-index: 200;
  span {
    display: inline-block;
    width: 50%;
    height: 100%;
    background: #fff;
    .iconfont {
      color: #909090;
      font-size: 22px;
      position: relative;
      top: 2px;
      em {
        display: block;
        position: absolute;
        top: -1px;
        right: -6px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #b81c22;
        font-size: 10px;
        color: #fff;
        line-height: 17px;
      }
    }
  }
  input[type="button"] {
    display: inline-block;
    width: 50%;
    height: 100%;
    background: #b81c22;
    color: #faf0f0;
    font-size: 14px;
    line-height: 34px;
  }
}
.myActive {
  border: 1px solid #cf6468 !important;
}
</style>